<template>
  <div>
    <el-switch v-if="row.status == 1" v-model="status" :disabled="true" :active-value="1" :inactive-value="0" @change="changeStatus" />
    <el-switch v-else v-model="status" :disabled="disabled" :active-value="1" :inactive-value="0" @change="changeStatus" />
  </div>
</template>

<script>
export default {
  props: {
    row: {
      type: Object,
      default: _ => {
        return {};
      }
    }
  },
  inject: ['reload'],
  data() {
    return {
      disabled: false,
      status: this.row.status
    };
  },
  methods: {
    changeStatus: function(value) {
      let txt = '关闭之后，系统将无法发送短信';
      if (value) {
        const h = this.$createElement;
        txt = h('p', null, [
          h('span', null, '短信只能同时开启一个，设为启用之后，将变更短信服务商；变更成功之后，请前往 '),
          h(
            'a',
            {
              class: 'el-link el-link--primary',
              on: {
                click: () => {
                  const routeData = this.$router.resolve({ path: '/system/notify/node/list' });
                  window.open(routeData.href, '_blank');
                }
              }
            },
            [
              h(
                'span',
                {
                  class: 'el-link--inner'
                },
                '短信模板配置'
              )
            ]
          ),
          h('span', null, ' 修改相关短信模板配置')
        ]);
      }
      this.$box
        .confirm(txt)
        .then(() => {
          const data = {
            __key: 'system.package.sms',
            provider: value ? this.row.key : 'local'
          };
          this.disabled = true;
          this.$http.post(
            '/admin/system/config/save',
            data,
            response => {
              this.disabled = false;
              this.reload();
            },
            error => {
              this.disabled = false;
              this.$message.error(error.msg);
            },
            false
          );
        })
        .catch(() => {
          this.status = value == 1 ? 0 : 1;
        });
    }
  }
};
</script>

<style></style>
